import React, { useState } from 'react'
import TableComponents from '../../components/TableComponents';
import RobotEditPage from './RobotEditPage';
import robot from '../../api/robot';

const entity = {
    id: 0,
    robot_name: '',
    robot_type: '',
    webhook: ''
};

const columns = [
    {
        title: '机器人名称',
        dataIndex: 'robot_name',
    },
    {
        title: '类型',
        dataIndex: 'robot_type_text',
    },
    {
        title: 'WebHook',
        dataIndex: 'webhook',
    },
    {
        title: '添加时间',
        dataIndex: 'created_at',
    },
];


export default function RobotPage() {
    const [visible, setVisible] = useState(false);
    const [data, setData] = useState(entity);
    const [refreshTable, setRefreshTable] = useState(0);

    return (
        <div>
            <TableComponents
                refreshTable={refreshTable}
                withBtn={{
                    add: () => setVisible(true),
                    operation: true,
                    export: true
                }}
                columns={columns}
                saveApi={(data) => robot.save(data)}
                infoApi={(data) => robot.info(data).then(({ data }) => {
                    setData(data)
                    setVisible(true)
                })}
                fetchApi={(data) => robot.list(data)}
                deleteApi={(data) => robot.delete(data)}
            />

            <RobotEditPage
                data={data}
                visible={visible}
                setRefreshTable={() => setRefreshTable(Math.random())}
                setVisible={setVisible} />
        </div>
    )
}
